<template>
	<div class="ranking-list-wrapper">
		<div class="ranking-list-title">排行榜</div>
		<template v-if="list">
			<div v-for="(item, i) in list" :key="item.id" class="ranking-list">
				<div>
					<el-badge :value="i + 1" class="item" :class="[i < 3 ? '' : 'not-hig']"></el-badge>
					<span class="list-item-name">{{ item.title }}</span>
				</div>
				<span class="list-item-amt">{{ item.count | thousands }}</span>
			</div>
		</template>
		<template v-else>
			<span class="list-not-data">暂无排行</span>
		</template>
	</div>
</template>
<script>
export default {
	name: 'SalesRankingList',
	props: {
		list: Array,
	},
};
</script>
<style lang="scss" scoped>
.ranking-list-wrapper {
	height: 300px;
	width: 400px;
	overflow-y: scroll;
}
.ranking-list-title {
	margin-top: 20px;
	font-size: 12px;
	color: #666;
	font-weight: 500;
}
.ranking-list {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0px;
}
.list-item-name {
	font-size: 12px;
	margin-left: 10px;
	color: #333;
}
.list-item-amt {
	font-size: 12px;
}
.ranking-list-wrapper {
	.el-badge__content {
		position: relative;
		top: 3px;
	}
}
.list-not-data {
	display: block;
	text-align: center;
	color: #ddd;
	margin-top: 100px;
}
</style>
<style lang="scss">
.ranking-list-wrapper {
	.el-badge__content {
		background-color: #000;
		position: relative;
		top: 3px;
	}
	.not-hig > .el-badge__content {
		background-color: #ffffff;
		color: #333;
	}
}
</style>
